<template>
  <div class="box">
    <div class="content">
      <div style="padding:.1rem .3rem;height: 2rem; display: flex; justify-content: space-between; align-items: center; background-color: #EEE;border-radius: .5rem .5rem 0 0;">
        <div style="display: flex; align-items: center;">
          <Button :style="'display:' + (pids.length === 0 ? 'none;': ';')" class="del-btn" @click="back">
            <svg t="1651662999616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2311" width="20" height="20"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="2312" fill="#8a8a8a"></path></svg>
          </Button>
          <span>城市选择</span>
        </div>
        <Button class="del-btn" @click="selectCity(undefined)">
          <svg t="1649845665115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3595" width="20" height="20"><path d="M687.603949 656.994302 541.10027 510.457878 687.603949 363.943966c8.829086-8.840342 8.829086-23.122627 0-31.961946-8.850575-8.840342-23.13286-8.840342-31.962969 0L509.138324 478.495932 362.623389 331.980997c-8.840342-8.818853-23.122627-8.818853-31.962969 0-8.840342 8.840342-8.840342 23.144116 0 31.984459l146.493445 146.514935L330.638931 656.994302c-8.819876 8.830109-8.819876 23.133883 0 31.962969 8.840342 8.829086 23.144116 8.829086 31.984459 0l146.514935-146.514935 146.502655 146.514935c8.830109 8.829086 23.112394 8.829086 31.962969 0C696.433034 680.129208 696.45657 665.824411 687.603949 656.994302z" p-id="3596" fill="#d81e06"></path><path d="M938.362063 510.457878c0-237.061161-192.174857-429.234995-429.247274-429.234995-237.062184 0-429.246251 192.173834-429.246251 429.234995 0 237.083673 192.185091 429.257507 429.246251 429.257507 97.345072 0 186.435133-33.110095 258.440074-87.677898 2.958378-3.354398 4.900613-7.636934 4.900613-12.449543 0-10.506285-8.521071-19.026332-19.027355-19.026332-5.431709 0-10.287297 2.162246-13.752212 5.826705l-0.2415 0c-64.456011 47.414893-143.745868 75.800383-229.876528 75.800383-214.679407 0-388.730489-174.073594-388.730489-388.719232 0-214.688617 174.051081-388.718209 388.730489-388.718209 214.688617 0 388.697743 174.029592 388.697743 388.718209 0 65.548902-15.386432 127.277802-44.081984 181.490517l0 0.309038c-0.508583 1.811252-1.104147 3.576455-1.104147 5.519714 0 10.507308 8.520047 19.028379 19.028379 19.028379 8.18952 0 15.054881-5.254677 17.703197-12.494569l0 0.132006C920.349827 648.38625 938.362063 581.536726 938.362063 510.457878z" p-id="3597" fill="#d81e06"></path></svg>
        </Button>
      </div>
      <div style="overflow: auto; padding: 0 .5rem;">
        <ul class="music-list">
          <li v-for="c in cityList" :key="c" @click="selectCity(c)">
            <div class="li-box">
            <span style="display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;">
              <span>{{c.name}}</span>
            </span>
            <svg v-if="c.level < 3" t="1651663934326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3272" width="20" height="20"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="3273" fill="#8a8a8a"></path></svg>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/requestutil"

export default {
  name: "WeatherCitySelector",
  data() {
    return {
      pids: [],
      cityList:[]
    }
  },
  mounted() {
    getCityList(this)
  },
  methods: {
    selectCity(city) {
      if (city) {
        if (city.level < 3) {
          this.pids.push(city.pid)
          getCityList(this, city.id)
        } else {
          setMyCity(this,city.id)
        }
      } else {
        this.$emit('update',0)
      }
    },
    back() {
      if (this.pids.length > 0) {
        let pid = this.pids.pop()
        getCityList(this, pid)
      }
    }
  }
}

function setMyCity(self, id) {
  request.post('/api/setting/setMyCity/'+id)
  .then(r=>{
    if (r.data.code == 1) {
      window.openMsg('设置成功',true)
      self.$emit('update',1)
    } else {
      window.openMsg('设置失败：'+r.data.msg)
    }
  })
}

function getCityList(self, pid) {
  pid = pid || 0
  request.get('/api/setting/getCityList/'+pid)
  .then(r=>{
    if (r.data.code == 1) {
      let citys = r.data.data
      let cityList = []
      if (citys && citys.length > 0) {
        for (let i = 0; i < citys.length; i++) {
          let c = citys[i]
          let l = {}
          l.id = c.id
          l.pid = c.pid
          l.name = c['name'+c.itemLevel]
          l.level = c.itemLevel
          cityList.push(l)
          self.cityList = cityList
        }
      }
    } else {
      window.openMsg('拉取城市信息失败：'+r.data.msg)
    }
  })
}
</script>

<style scoped>
.box {
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  background-color: rgba(255,255,255,.5);
}
.content {
  position: fixed;
  left:1rem;
  right:1rem;
  bottom:4rem;
  top:3rem;

  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: #FFF;
  border-radius: .5rem;
  box-shadow: 0 0 1rem #AAA;
}
.music-list>li {
  border-bottom: .01rem solid #EEE;
}
.music-list>li:active {
  background-color: #EEE;
}
.music-list>li .li-box {
  padding: .3rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.music-list .li-box >span{
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: normal;
  word-wrap: normal;
  white-space: nowrap;
}
.del-btn {
  border-radius: 21px;
  padding:0;
  border:none;
  background: none;
}
</style>